<template>
  <el-card class="box-card" shadow="hover">
    <FontSizeAdaptor/>
    <div slot="header" class="header">
      <span class="header_title">昨日日用量排名前十</span>
    </div>
    <div id="main" ref="main">

    </div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
// import resize from './mixins/resize'
import { histogramEchartSetting } from "./histogramsetting";
import { usageTop10ForDb } from '@/api/index/terminal.js'
import FontSizeAdaptor from "../../../components/FontSizeAdaptor/FontSizeAdaptor.vue";

export default {
  name: "UsageTop10ForDbEcharts",
  components: {FontSizeAdaptor},
  data() {
    return {
      dataList: [],
      chartExtend: histogramEchartSetting,
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 获取数据
    getList() {
      usageTop10ForDb().then(response => {
        if(response.code === 200) {
          this.dataList = response.data
          this.renderChart(this.dataList)
        }
      })
    },
    // 处理数据
    renderChart(res){
      let seriesList = []
      let xAxisList = []
      this.chartExtend.yAxis = [{
        type: 'value',
        name: '用量',
        position: 'left',
        axisLabel: {
          formatter: '{value} m³'
        }
      }]
      res.forEach(item => {
        if(item.value == null){
          item.value = ''
        }
        seriesList.push(item.value)
        xAxisList.push(item.terminalName)
        this.chartExtend.series=[{
          name: '用量',
          type: 'line',
          smooth: true,
          animationDuration: 2000,
          animationEasing: 'quarticln',
          itemStyle: {
            // borderRadius: 10,
            color: {
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: '#5C87E5' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#47F4FF' // 100% 处的颜色
                }
              ]
            },
          },
          barWidth: '40%',
          data: seriesList,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' m³';
            }
          },
        }]
      })
      this.chartExtend.grid = {
        // x: 40,
        // y: 40,
        left: '1%',
        right: '1%',
        bottom: '10%',
        top: '14%',
        containLabel: true
      }
      this.chartExtend.legend.data = []
      this.chartExtend.xAxis = [
        {
          type: 'category',
          data: xAxisList,
          axisTick: {
            alignWithLabel: true
          }
        }
      ]
      this.initEchart()
    },
    // 初始化图表
    async initEchart() {
      let myChart = echarts.init(this.$refs.main)
      myChart.setOption(this.chartExtend, true)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    },
    // 重置图表
    resetEchart(){
      this.chartExtend = histogramEchartSetting
    }
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-card__header {
  padding: 7px 15px 7px 20px !important;
}

::v-deep .el-card__body {
  height: 32.5vh !important;
}
#main{
  height: 100%;
  width: 100%;
}
</style>
